<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>淘宝网-淘！我喜欢</title>
		<link rel="stylesheet" href="css/swzdy.css" />
		<link rel="stylesheet" href="css/swiper-bundle.min.css" />
		<link rel="stylesheet" type="text/css" href="css/taobaosy.css" />
		<script src="libs/jquery.js"></script>
		<script src="swiper-bundle.min.js"></script>
		<script src="libs/swiper-bundle.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="wrapper">
			<!-- 上层导航栏 -->
			<div class="top-nav-wrap">
				<!-- 上层导航栏中的固定内容部分 -->
				<div class="top-nav">
					<!-- 左内容 -->
					<ul class="top-nav-l">
						<!-- 	<li class="top-nav-menu china">
							<span class="china-span">中国大陆</span>
							<span class="bgPic xsjPic"></span>
						</li> -->
						<li class="top-nav-menu loginAndreg">
							<a href="taobaodl.html" class="login">亲，请登录</a>
							<a href="taobaozc.html" class="reg">免费注册</a>
						</li>

						<li class="top-nav-menu phone">
							<a href="">手机逛淘宝</a>
						</li>
					</ul>
					<!-- 右内容 -->
					<ul class="top-nav-r">
						<li class="top-nav-menu myTaobao">
							<a href="#">我的淘宝</a>
							<span class="bgPic xsjPic"></span>
						</li>

						<li class="top-nav-menu shopCar">
							<a href="#">
								<span class="bgPic shopCarPic"></span>
								<span>购物车 </span>
							</a>
						</li>

						<li class="top-nav-menu like">
							<a href="#">
								<span class="bgPic likePic"></span>
								<span>收藏夹</span>
							</a>
							<span class="bgPic xsjPic"></span>
						</li>

						<li class="top-nav-menu good">
							<a>商品分类</a>
						</li>

						<li class="top-nav-menu cutOff">
							<span>|</span>
						</li>

						<li class="top-nav-menu seller">
							<a href="#">卖家中心</a>
							<span class="bgPic xsjPic"> </span>
						</li>

						<li class="top-nav-menu">
							<a href="#">联系客服</a>
							<span class="bgPic xsjPic"></span>
						</li>

						<li class="top-nav-menu">
							<a href="#">
								<span class="bgPic webNavPic"> </span>
								<span>网站导航</span>
							</a>
							<span class="bgPic xsjPic"> </span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 搜索区 -->
			<div class="search-wrap">
				<div class="search-con">
					<div class="logo-box">
						<img src="img/logo.png" alt="" />
					</div>
					<div class="search-box">
						<!-- 搜索区域上半模块 -->
						<div class="search-bd">
							<!-- <div class="search-tab">
								<ul>
									<li class="select">宝贝</li>
									<li>天猫</li>
									<li>店铺</li>
								</ul>
							</div> -->
							<div class="search-panel">
								<a href="#" class="sousuo"></a>
								<form action="" method="get" accept-charset="utf-8">
									<div class="btn">
										<button>搜索</button>
									</div>
									<div class="search-inp-box">
										<div class="search-inp">
											<input type="text" placeholder="广东科学职业技术学校" />
										</div>
									</div>
								</form>
								<a href="#" class="camera"
									><img src="img/sousuo.png" alt=""
								/></a>
							</div>
						</div>
						<!-- 搜索区域下半模块 -->
						<div class="search-ft">
							<ul>
								<li><a href="#">新潮连衣裙</a></li>
								<li><a href="#">第四套</a></li>
								<li><a class="select" href="#">潮流T恤</a></li>
								<li><a href="#">时尚女鞋</a></li>
								<li><a href="#">短裤</a></li>
								<li><a href="#">半身裙</a></li>
								<li><a href="#">男士外套</a></li>
								<li><a href="#">墙纸</a></li>
								<li><a href="#">行车记录仪</a></li>
								<li><a href="#">新款男鞋</a></li>
								<li><a href="#">耳机</a></li>
							</ul>
							<a class="more" href="#">更多></a>
						</div>
					</div>
					<div class="code-box">
						<a href="#" class="p-tb">手机淘宝</a>
						<a href="#" class="code"></a>
						<a href="#" class="close">x</a>
					</div>
				</div>
			</div>
			<!-- 中间部分导航栏 -->
			<div class="screen-nav-wrap">
				<div class="screen-nav-con">
					<h2>主题市场</h2>
					<ul>
						<li>
							<a href="#">天猫</a>
						</li>
						<li>
							<a href="#">聚划算</a>
						</li>
						<li>
							<a href="#">天猫超市</a>
						</li>
					</ul>
					<ul>
						<li>|</li>
						<li>
							<a href="#">淘抢购</a>
						</li>
						<li>
							<a href="#">电器城</a>
						</li>
						<li>
							<a href="#">司法拍卖</a>
						</li>
						<li>
							<a href="#">中国制造</a>
						</li>
						<li>
							<a href="#">兴农扶贫</a>
						</li>
					</ul>
					<ul>
						<li>|</li>
						<li>
							<a href="#">飞猪旅行</a>
						</li>
						<li>
							<a href="#">智能生活</a>
						</li>
						<li>
							<a href="#">苏宁易购</a>
						</li>
					</ul>
				</div>
			</div>

			<!-- 主要展示区 -->
			<div class="screen-box-wrap">
				<div class="main">
					<div class="main-inner">
						<div class="inner-left">
							<ul>
								<li>
									<a href="#">女装 / </a>
									<a href="#">男装 / </a>
									<a href="#">内衣</a>
									<span> </span>
								</li>
								<li>
									<a href="#">鞋靴 / </a>
									<a href="#">箱包 / </a>
									<a href="#">配件</a>
									<span> </span>
								</li>
								<li>
									<a href="#">家电 / </a>
									<a href="#">数码 / </a>
									<a href="#">手机</a>
									<span> </span>
								</li>
								<li>
									<a href="#">美妆 / </a>
									<a href="#">洗护 / </a>
									<a href="#">保健品</a>
									<span> </span>
								</li>
								<li>
									<a href="#">珠宝 / </a>
									<a href="#">眼镜 / </a>
									<a href="#">手表</a>
									<span> </span>
								</li>
								<li>
									<a href="#">运动 / </a>
									<a href="#">户外 / </a>
									<a href="#">乐器</a>
									<span> </span>
								</li>
								<li>
									<a href="#">游戏 / </a>
									<a href="#">动漫 / </a>
									<a href="#">影视</a>
									<span> </span>
								</li>
								<li>
									<a href="#">美食 / </a>
									<a href="#">生鲜 / </a>
									<a href="#">零食</a>
									<span> </span>
								</li>
								<li>
									<a href="#">鲜花 / </a>
									<a href="#">宠物 / </a>
									<a href="#">农资</a>
									<span> </span>
								</li>
								<li>
									<a href="#">房产 / </a>
									<a href="#">装修 / </a>
									<a href="#">建材</a>
									<span> </span>
								</li>
								<li>
									<a href="#">家具 / </a>
									<a href="#">家饰 / </a>
									<a href="#">家纺</a>
									<span> </span>
								</li>
								<li>
									<a href="#">汽车 / </a>
									<a href="#">二手车 / </a>
									<a href="#">用品</a>
									<span> </span>
								</li>
								<li>
									<a href="#">办公 / </a>
									<a href="#">DIY / </a>
									<a href="#">五金电子</a>
									<span> </span>
								</li>
								<li>
									<a href="#">百货 / </a>
									<a href="#">厨具 / </a>
									<a href="#">家庭保健</a>
									<span> </span>
								</li>
								<li>
									<a href="#">学习 / </a>
									<a href="#">卡劵 / </a>
									<a href="#">本地服务</a>
									<span> </span>
								</li>
								<li>
									<a href="#">男装 / </a>
									<a href="#">女装 / </a>
									<a href="#">内衣</a>
									<span> </span>
								</li>
							</ul>
						</div>
						<div class="inner-con">
							<div class="pic-box">
								<!-- 轮播图 -->
								<div class="swiper-container">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<img src="img/01.png" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/02.jpg" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/03.jpg" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/04.jpg" alt="" />
										</div>
									</div>
									<!-- 如果需要分页器 -->
									<div class="swiper-pagination"></div>

									<!-- 如果需要导航按钮 -->

									<div class="swiper-button-next"></div>
									<div class="swiper-button-prev"></div>

									<!-- 如果需要滚动条 -->
									<div class="swiper-scrollbar"></div>
								</div>
							</div>
							<div class="inner-mall">
								<div class="head">
									<span class="tm-pic"></span>
									<span class="tm">理想生活上天猫</span>
								</div>
								<div class="swiper-container" id="swiper1">
									<div class="swiper-wrapper ulist">
										<!-- 	<div class="swiper-slide">
											<img src="img/001.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/002.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/003.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/004.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/005.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/006.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/007.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/008.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/009.webp" alt="" />
										</div>
										<div class="swiper-slide">
											<img src="img/0010.webp" alt="" />
										</div> -->
									</div>
									<!-- Add Pagination -->
									<div class="swiper-pagination"></div>
									<!-- Add Arrows -->
									<div
										class="swiper-button-prev"
										:class="`swiper-button-pre${index}`"
									></div>
									<div
										class="swiper-button-next"
										:class="`swiper-button-next${index}`"
									></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-middle">
						<a href="#" class="middle-pic1">
							<img src="img/33.jpg" alt="" />
						</a>
						<div class="middle-pic2">
							<h5>今日热卖</h5>
							<a href="#">
								<img src="img/34.jpg" alt="" />
							</a>
						</div>
					</div>
					<div class="main-bottom">
						<div class="bottom-con">
							<div class="logo">
								<img src="img/35.jpg" alt="" />
							</div>
							<a href="#" class="tbttCon">
								<img src="img/36.jpg" alt="" />
								<h4>油皮这辈子都不能错过的洗面奶</h4>
								<p>
									秋冬来了，干皮星人都在瑟瑟发抖，然而你们并不懂我们这些油皮的痛苦~
								</p>
							</a>
						</div>
					</div>
				</div>
				<div class="col-right">
					<div class="member">
						<div class="member-bd">
							<div class="tx">
								<a href="#">
									<img src="./img/taobaoren.jpg" alt="" />
								</a>
							</div>
							<span class="hello">Hi! 你好</span>
							<p>
								<a href="#" class="icon">
									<span class="pic"></span>
									<span class="con">淘金币领钱</span>
								</a>
								<a href="#" class="club">
									<span class="pic"></span>
									<span class="con">会员俱乐部</span>
								</a>
							</p>
						</div>
						<div class="member-ft">
							<a href="taobaodl.html" class="login">登录</a>
							<a href="taobaozc.html">注册</a>
							<a href="#">开店</a>
						</div>
					</div>
					<div class="message">
						<a href="#">
							网上举报有害信息
							<span></span>
						</a>
					</div>
					<div class="notice">
						<div class="title">
							<ul>
								<li class="select">
									<a href="#">公告</a>
								</li>
								<li>
									<a href="#">规则</a>
								</li>
								<li>
									<a href="#">论坛</a>
								</li>
								<li>
									<a href="#">安全</a>
								</li>
								<li>
									<a href="#">公益</a>
								</li>
							</ul>
						</div>
						<div class="con">
							<ul>
								<li class="select">
									<a href="#">马云：公益是治疗这个地球最好的良药</a>
								</li>
								<li><a href="#">马云：教育公益在参与</a></li>
								<li><a href="#">约旦王后亮相公益大会</a></li>
							</ul>
						</div>
					</div>
					<div class="module">
						<div>
							<ul>
								<li>
									<a href="#">
										<span class="pic1"></span>
										<p>充话费</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic2"></span>
										<p>旅行</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic3"></span>
										<p>车险</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic4"></span>
										<p>游戏</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic5"></span>
										<p>彩票</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic6"></span>
										<p>电影</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic7"></span>
										<p>酒店</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic8"></span>
										<p>理财</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic9"></span>
										<p>找服务</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic10"></span>
										<p>演出</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic11"></span>
										<p>水电煤</p>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="pic12"></span>
										<p>火车票</p>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="app">
						<h3>
							阿里APP
							<a href="#">更多></a>
						</h3>
						<ul>
							<li>
								<a href="#"><img src="./img/001.png" alt="" /></a>
							</li>
							<li>
								<a href="#"><img src="./img/002.png" alt="" /></a>
							</li>
							<li>
								<a href="#"><img src="./img/003.png" alt="" /></a>
							</li>
							<li>
								<a href="#"><img src="./img/004.png" alt="" /></a>
							</li>
							<li>
								<a href="#"><img src="./img/005.png" alt="" /></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 有好货与爱逛街 -->
		<div class="clearfix layer mt10">
			<!-- 有好货 -->
			<div class="goods fl">
				<div class="head clearfix">
					<h3 class="fl">
						<img src="./img/006.png" alt="有好货" />
					</h3>
				</div>
				<ul class="list list1"></ul>
			</div>
			<!-- shopping要放在goods后面,这样另外设置的样式就能覆盖goods的样式 -->
			<div class="goods fr shopping">
				<div class="head clearfix">
					<h3 class="fl">
						<img src="./img/007.png" alt="爱逛街" />
						<!-- <span class="iconfont">&#xe67a;</span> -->
						<i>献给聪明可爱的你</i>
					</h3>
				</div>
				<ul class="list list2"></ul>
			</div>
		</div>
		<!-- 右侧固定定位导航 -->
		<div id="tool">
			<span class="iconfont"><img src="./img/taobao.png" alt="" /></span>
			<div class="btn">
				<a href="#" class="c4 active">爱逛 好货</a>
				<a href="#" class="c5">好店 直播</a>
				<a href="#" class="c6">品质 特色</a>
				<a href="#" class="c7">实惠 热卖</a>
				<a href="#" class="c4">猜你 喜欢</a>
				<a href="#" class="item6">反馈</a>
				<a href="#" class="">回到 顶部</a>
			</div>
		</div>
		<!--消费者保障-->
		<div class="xiaofeizhe">
			<div>
				<img src="../images/about-icon1.png" alt="" />&nbsp<span
					>消费者保障</span
				>
				<p>
					<a href="">保障范围</a>
					<a href="">退货款流程</a>
					<a href="">服务中心</a>
					<a href="">更多特色服务</a>
				</p>
			</div>
			<div>
				<img src="../images/about-icon1.png" alt="" />&nbsp<span>新手上路</span>
				<p>
					<a href="">新手专区</a>
					<a href="">消费警示</a>
					<a href="">交易安全</a>
					<a href="">24小时在线帮助</a>
					<a href="">免费开店</a>
				</p>
			</div>
			<div>
				<img src="../images/about-icon1.png" alt="" />&nbsp<span>付款方式</span>
				<p>
					<a href="">快捷支付</a>
					<a href="">信用卡</a>
					<a href="">余额宝</a>
					<a href="">蚂蚁花呗</a>
					<a href="">货到付款</a>
				</p>
			</div>
			<div>
				<img src="../images/about-icon1.png" alt="" />&nbsp<span>淘宝特色</span>
				<p>
					<a href="">手机淘宝</a>
					<a href="">旺旺/旺信</a>
					<a href="">大众评审</a>
				</p>
			</div>
		</div>
		<!-- 页尾 -->
		<footer>
			<div>
				<ul class="zuihou">
					<li>阿里巴巴集团</li>
					<li>淘宝网</li>
					<li>天猫</li>
					<li>聚划算</li>
					<li>全球速卖通</li>
					<li>阿里巴巴国际交易市场</li>
					<li>1688</li>
					<li>阿里妈妈</li>
					<li>飞猪</li>
					<li>阿里云计算</li>
					<li>yunOs</li>
					<li>阿里通信</li>
					<li>一淘</li>
					<li>万网</li>
					<li>高德</li>
					<li>US</li>
					<li>友盟</li>
					<li>虾米</li>
					<li>阿里星球</li>
					<li>钉钉</li>
					<li>支付宝</li>
					<li>优酷</li>
					<li>土豆</li>
					<li>阿里健康</li>
					<li>阿里影业</li>
					<li>阿里体育</li>
					<li>网商银行</li>
				</ul>
			</div>
			<div>
				<div>
					<a href="">关于淘宝</a>
					<a href="">合作伙伴</a>
					<a href="">营销中心</a>
					<a href="">廉正举报</a>
					<a href="">联系客户</a>
					<a href="">开放平台</a>
					<a href="">诚征英才</a>
					<a href="">联系我们</a>
					<a href="">网站地图</a>
					<a href="">法律声明隐私政策</a>
					<a href="">知识产权</a>
					<span class="foter">@2003-2017 Taobao.com 版权所有</span>
				</div>
				<div class="zhean">
					<span>网络文化经营许可证: 浙网文[2013]0268-027</span>
					<span>正直电信业务经营许可证： 浙B2-20080224</span>
					<span>信息网络传播视听节目许可证：1109364号</span>
					<span
						>互联网违法和不良信息举报电话：0571-81683755
						blxxjb@alibaba-inc。com</span
					>
					<p>浙江网安备 33010002000078</p>
				</div>
			</div>
			<img src="../images/footer-img.png" alt="" />
		</footer>

		<!-- js -->
		<script>
			// 获取商品
			$str1 = "";
			$str2 = "";
			$str3 = "";
			$str4 = "";

			$.get(
				"http://jx.xuzhixiang.top/ap/api/productlist.php",
				{
					uid: 65189,
				},
				(res) => {
					$data = res.data;
					// console.log($data[0].pimg);

					for (let i = 0; i < 10; i += 2) {
						/* 	console.log(i); */
						// console.log($data[i]);
						$str1 += `
						<li>
						<a href="#"><img data-pid="${$data[i].pid}" src="${$data[i].pimg}" alt="" /></a>
						<h4><a href="#">${$data[i].pname}</a></h4>
						<p class="text">
							<a href="#">${$data[i].pprice}元</a>
						</p>
						<a href="#" class="comment">
							<span class="iconfont">${$data[i].pdesc}</span>
							<i></i>
						</a>
					</li>`;
					}
					$(".list1").html($str1);
					for (let i = 1; i < 11; i += 2) {
						$str2 += `
						<li>
						<a href="#"><img data-pid="${$data[i].pid}" src="${$data[i].pimg}" alt="" /></a>
						<h4><a href="#">${$data[i].pname}</a></h4>
						<p class="text">
							<a href="#">${$data[i].pprice}元</a>
						</p>
						<a href="#" class="comment">
							<span class="iconfont">${$data[i].pdesc}</span>
							<i></i>
						</a>
					</li>`;
					}
					//
					$(".list2").html($str2);
					for (let i = 0; i < 10; i++) {
						$str3 += `
						<div class="swiper-slide">
						<img src="${$data[i].pimg}" alt="" />
						</div>
						`;

						// console.log($data[i].pimg);
					}
					console.log($str3);
					// $(".ulist").html($str3);
				}
			);
			/* <div class="swiper-slide">
					<img src="img/001.webp" alt="" />
					</div> */
		</script>
		<!-- 第一个轮播图 -->
		<script>
			//  轮播图
			var mySwiper = new Swiper(".swiper-container", {
				// direction: "vertical", // 垂直切换选项
				loop: true, // 循环模式选项

				// 如果需要分页器
				pagination: {
					el: ".swiper-pagination",
				},

				// 如果需要前进后退按钮
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
				//  自动播放
				autoplay: true,

				// 如果需要滚动条
				/* scrollbar: {
					el: ".swiper-scrollbar",	
				}, */
			});
		</script>
		<!-- 第二个轮播图 -->
		<script>
			// 第二个轮播图
			var QEswiper = new Swiper("#swiper1", {
				// 展示两条
				slidesPerView: 2,
				// 间隔px
				spaceBetween: 0,
				//  播放之后的两条
				slidesPerGroup: 2,
				//  自动播放
				autoplay: true,
				// 循环
				loop: true,
				loopFillGroupWithBlank: true,
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
				},
				navigation: {
					nextEl: ".swiper-button-next" + this.index,
					prevEl: ".swiper-button-prev" + this.index,
				},
			});
		</script>
	</body>
</html>
